// 轮播图
(function($){
	$.fn.extend({
		banner:function(imgArr){
			let ind = 0;
			let sign = null;
			$(this).css({margin:"0 auto",position:"relative"});
			let ul = $("<ul>");
			let ul1 = $("<ul>");
			ul.attr("id","ul");
			ul1.attr("id","ul1");
			$(this).append(ul);
			$(this).append(ul1);
			$("#ul").css({width:"100%",height:"100%",padding:"0",margin:"0",overflow:"hidden"});
			$("#ul1").css({padding:"0",margin:"0",position:"absolute",left:"50%",bottom:"10px",transform:"translateX(-50%)"});
			for(let i=0;i<imgArr.length;i++){
				let li = $("<li>");
				let li1 = $("<li>");
				let img = $("<img />");
				li.attr("class","li");
				li1.attr("class","li1");
				$("#ul").append(li);
				$("#ul1").append(li1);
				$($(".li").get(i)).append(img);
				$(".li>img")[i].src = imgArr[i];
			}
			$("#ul>.li").css({"list-style":"none",width:"100%",height:"100%"});
			$(".li>img").css({width:"100%",height:"100%"});
			$("#ul1>.li1").css({float:"left","list-style":"none",width:"10px",height:"10px","background-color":"rgba(200,200,200)"})
			.css({margin:"0 5px","border-radius":"50%"});
			$($(".li1")[0]).css("background-color","skyblue")
			
			let span1 = $("<span>");
			let span2 = $("<span>");
			$(this).append(span1);
			$(this).append(span2);
			span1.attr("id","left1");
			span2.attr("id","right");
			$("#left1").text("<");
			$("#right").text(">");
			$("#left1,#right").css({display:"inline-block",width:"30px",height:"50px","background-color":"rgba(200,200,200,0.6)"})
			.css({position:"absolute",top:"50%",transform:"translateY(-50%)","text-align":"center","line-height":"50px"})
			.css({color:"white","font-size":"25px",opacity:"0",transition:"1s",  cursor: "pointer"});
			$("#right").css({right:"0"});
			$("#left1").css({left:"0"});
			
			function setI(){
				sign = setInterval(function(){
					ind<imgArr.length-1 ? ind++ : ind=0;
					contrl();
				},3000);
			}
			
			function contrl(){
				$(".li").hide();
				$($(".li")[ind]).show();
				$(".li1").css("background-color","rgba(200,200,200)");
				$($(".li1")[ind]).css("background-color","skyblue");
			}
			
			$(function(){
				setI();
			});
			
			$(this).mouseenter(function(){
				$("#left1")[0].style.opacity = 1 ;
				$("#right")[0].style.opacity = 1 ;
			});
			$(this).mouseleave(function(){
				$("#left1")[0].style.opacity = 0 ;
				$("#right")[0].style.opacity = 0 ;
			});
			$("#left1").click(function(){
				clearInterval(sign);
				ind>0 ? ind-- : ind=imgArr.length-1;
				contrl();
				setI();
			});
			$("#right").click(function(){
				clearInterval(sign);
				ind<imgArr.length-1 ? ind++ : ind=0;
				contrl();
				setI();
			});
			
			$(".li1").click(function(e){
				e = e || window.event;
				clearInterval(sign);
				ind = $(this).index();
				contrl();
				setI();
			});
		}
	});
})(jQuery);

